<template>
  <div>
    <h2>User List</h2>
    <div>
      <a-row>
        <a-col :span="18" :push="6">
          <template>
            <a-table
                :columns="columns"
                :data-source="data"
                :scroll="{y: 750 }"
                :pagination="pagination"
                :current="pagination.current"
                row-key="id"
                @change="tableChange"
                bordered
            >
              <template
                  slot="action"
                  slot-scope="record"
              >
                <a-button
                    type=""
                    slot="action"
                    @click="getInfo(record)"
                >
                  详情
                </a-button>
                <a-button
                    type="primary"
                    slot="action"
                    @click="showDrawer(record)"
                >
                  修改
                </a-button>
                <a-popconfirm
                    placement="left"
                    ok-text="移除"
                    cancel-text="取消"
                    @confirm="confirm"
                    @cancel="cancel"
                >
                  <template slot="title">
                    <p>sdfds</p>
                  </template>
                  <a-button
                      type="danger"
                      @click="getGoodsId(record)"
                  >
                    Delete
                  </a-button>
                </a-popconfirm>
              </template>
            </a-table>
          </template>
        </a-col>
        <a-col :span="6" :pull="18">
          11111111111111111
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {getUsers} from "@/api/user_api";
// 设置表头参数
const columns = [
  {title: '用户名', width: 80, dataIndex: 'userName', align: 'center'},
  {title: '头像', width: 70, dataIndex: 'userImg', align: 'center'},
  {title: '昵称', dataIndex: 'nickName', width: 100, align: 'center'},
  {title: '城市', dataIndex: 'userAddress', width: 100, align: 'center'},
  {title: '角色', dataIndex: 'roleName', width: 100, align: 'center'},
  {title: '注册时间', dataIndex: 'regTime', width: 100, align: 'center'},
  {
    title: '操作',
    align: 'center',
    key: 'operation',
    width: 180,
    scopedSlots: {customRender: 'action'}
  }
]
export default {
  name: "StuList",
  data() {
    return {
      // 加载动画
      loading: false,
      // 数据源
      data: [],
      // 表格表头
      columns,
      // 分页器
      pagination: {
        total: 0,
        current: 1,
        defaultPageSize: 8
        // 每页展示数据条数 默认关闭
        // showSizeChanger: true,
        // pageSizeOptions: ['5', '10', '15', '20']
      }
    }
  },
  methods: {
    tableChange(e) {
      this.pagination.current = e.current
    },
    getInfo() {

    },
    showDrawer() {

    },
    cancel(e) {
      console.log(e)
      this.$message.error('操作取消!')
    },
    confirm(e) {

    },
    async getUsers() {
      this.loading = true;
      let res = await getUsers();
      this.loading = true;
      console.log("-------------->>")
      console.log(res.data.data)
      this.data = res.data.data;
    }
  },
  created() {
    this.getUsers();
  }
}
</script>

<style scoped>

</style>